<template>
	<basic-container>
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="所有订单" name="-10">
			</el-tab-pane>
			<el-tab-pane label="待付款" name="10">
			</el-tab-pane>
			<el-tab-pane label="待审核" name="20">
			</el-tab-pane>
			<el-tab-pane label="待发货" name="27">
			</el-tab-pane>
			<el-tab-pane label="待收货" name="30">
			</el-tab-pane>
			<el-tab-pane label="已完成" name="50">
			</el-tab-pane>
			<el-tab-pane label="已取消" name="0">
			</el-tab-pane>
		</el-tabs>
		<avue-crud :option="option" :data="data" ref="crud1" @expand-change="expandChanges" :table-loading="loading"
		:permission="permissionList" :page="page" @refresh-change="refreshChange" @search-change="searchChange"
		@search-reset="searchReset" @current-change="currentChange" @size-change="sizeChange" @on-load="onLoad">
			<template slot="expand" slot-scope="{row}" v-if="row.orderFormGoodsResults.length > 0">
				<avue-crud ref="crud2" :option="option1" :data="row.orderFormGoodsResults"  @on-load="onload(row)" :row-style="rowStyle">
					<template slot-scope="{row}" slot="goodsMainPhotoUrl">
						<img :src="row.goodsMainPhotoUrl" style="width:50px;height:50px;" />
					</template>
					<template slot-scope="{row}" slot="goodsName">
						<div>{{row.goodsName}} <span style="color: red;" v-if="row.acType==8">[赠品]</span></div>
					</template>
				</avue-crud>
			</template>
			<template slot-scope="{row}" slot="lastTotalAmount">
				<div>
					<p>{{row.lastTotalAmount}}</p>
				</div>
			</template>
			<template slot-scope="{row}" slot="actualShipmentAmount">
				<div>
					<p>{{row.actualShipmentAmount}}</p>
				</div>
			</template>
			<template slot-scope="{row}" slot="user">
				<span @click="callUser(row.userId)" style="color: #ee0a24;cursor: pointer">{{row.userName}}
					<i style="color: #ee0a24;width: 20px;height: 20px;" class="el-icon-message"></i>
				</span>
			</template>
			<template slot-scope="scope" slot="menu">
				<el-button type="text" size="small" @click="seeDetails(scope.row.id)">查看详情</el-button>
				<el-button type="text" v-if="scope.row.orderStatus==20" size="small" @click="checkGoods(scope.row.id)">审核</el-button>
			</template>
			<!-- 自定义添加搜索条件  按日期搜索  -->
			<template slot="search">
				<el-col :md="24" :xs="12"  style="width: 50%;float: left;">
					<el-form-item label="下单时间" style="width: 50%;display: inline-block;">
						<el-date-picker size="mini" placeholder="开始时间" value-format="yyyy-MM-dd" v-model="addTimeBegin" type="date">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="至" style="width: 50%;display: inline-block;">
						<el-date-picker size="mini" placeholder="结束日期" @change="getTime" value-format="yyyy-MM-dd" v-model="addTimeEnd" type="date">
						</el-date-picker>
					</el-form-item>
				</el-col>
			</template>
		</avue-crud>
<!--	详情	-->
		<el-drawer title="订单详情" :visible.sync="dialogDeatilVisible" size="50%" :with-header="true">
			<avue-form :option="optionDetail" v-model="form1">
				<template slot="group1Header">
					<h4>订单信息</h4>
				</template>
				<!--<template slot="group2Header">
					<h4>卖家信息</h4>
				</template>-->
				<template slot="group3Header">
					<h4>配货单信息</h4>
				</template>
				<template slot="group4Header">
					<h4>优惠信息</h4>
				</template>
				<template slot="group5Header">
					<h4>收货地址</h4>
				</template>
				<template slot="group6Header">
					<h4>门店自提信息</h4>
				</template>
				<template slot="group7Header">
					<h4>操作历史</h4>
				</template>
				<template slot-scope="scope" slot="menuForm">
					<el-button @click="closeDetailDialog">关闭</el-button>
				</template>
				<template slot-scope="scope" slot="coupon">
					<div>
						<p>运费： <span style="padding: 0 0.3rem;">{{form1.actualShipmentAmount}}</span></p>
						<!--<p>店铺优惠：<span style="padding: 0 0.3rem;">{{form1.couponAmountStore}}</span></p>
						<p>平台优惠：<span style="padding: 0 0.3rem;">{{form1.couponAmountPlatform}}</span></p>-->
						<p v-if="form1.fullCutAmount > 0">满减优惠：<span style="padding: 0 0.3rem;">{{form1.fullCutAmount}}</span></p>
						<p v-if="form1.fullDiscountAmount > 0">满折优惠：<span style="padding: 0 0.3rem;">{{form1.fullDiscountAmount}}</span></p>
						<!--<p>积分抵扣：<span style="padding: 0 0.3rem;">{{form1.integralUse}}</span></p>-->
						<!--<p>订单总价：<span style="padding: 0 0.3rem;">{{form1.totalPrice}}</span></p>-->
						<p>总付积分：<span style="padding: 0 0.3rem;">{{form1.lastAmount}}</span></p>
					</div>

				</template>
				<template slot-scope="scope" slot="goodsDetails">
					<avue-crud :data="form1.goodsDetail" :option="option1">
						<template slot-scope="{row}" slot="goodsMainPhotoUrl">
							<img :src="row.goodsMainPhotoUrl" style="width:50px;height:50px;" />
						</template>
						<template slot-scope="{row}" slot="goodsName">
							<div>{{row.goodsName}} <span style="color: red;" v-if="row.acType==8">[赠品]</span></div>
						</template>
					</avue-crud>
				</template>
				<template slot-scope="scope" slot="history">
					<div style="padding: 0.2rem;">
						<p v-for="item of form1.historyLog" :key="item.index"><span style="padding: 0 0.1rem;">{{item.stateInfo}}：</span>
							<span style="color: #ff9900;padding: 0 0.2rem;">{{item.userName}}</span>
							<span style="padding: 0 0.1rem;">于
								<span style="padding: 0 0.1rem;">{{item.addTime}}</span>{{item.logInfo}}
							</span>
						</p>
					</div>
				</template>
				<template slot-scope="scope" slot="distributionSn">
					<div class="distribution" v-if="form1.orderDistributionList.length==0">
						暂无配货单信息
					</div>
					<div class="distribution" v-for="item of form1.orderDistributionList" :key="item.id">
						<el-form :model="item">
							<el-form-item>
								<span style="padding: 0.1rem 0.5rem">配货单号：{{item.distributionSn}}</span>
								<span style="padding: 0.1rem 0.5rem">生成时间：{{item.addTime}}</span>
								<span style="padding: 0.1rem 0.5rem" v-if="item.status==0">配货单状态：未发货</span>
								<span style="padding: 0.1rem 0.5rem" v-if="item.status==1">配货单状态：已发货</span>
								<span style="padding: 0.1rem 0.5rem" v-if="item.status==2">配货单状态：已完成</span>
								<span style="padding: 0.1rem 0.5rem" v-if="item.status==3">配货单状态：已退款</span>
								<span style="padding: 0.1rem 0.5rem" v-if="item.status==4">配货单状态：已收货</span>
								<span style="padding: 0.1rem 0.5rem" v-if="item.status==-1">配货单状态：退款审核</span>
							</el-form-item>
							<el-form-item v-if="item.orderFormGoodsResultList.length>0">
								<avue-crud ref="crud2" :option="option1" :data="item.orderFormGoodsResultList">
									<template slot-scope="{row}" slot="goodsMainPhotoUrl">
										<img :src="row.goodsMainPhotoUrl" style="width:50px;height:50px;" />
									</template>
									<template slot-scope="{row}" slot="goodsName">
										<div>{{row.goodsName}} <span style="color: red;" v-if="row.acType==8">[赠品]</span></div>
									</template>
								</avue-crud>
							</el-form-item>
							<el-form-item v-else>
								<avue-crud ref="crud2" :option="option1" :data="form1.goodsDetail">
									<template slot-scope="{row}" slot="goodsMainPhotoUrl">
										<img :src="row.goodsMainPhotoUrl" style="width:50px;height:50px;" />
									</template>
									<template slot-scope="{row}" slot="goodsName">
										<div>{{row.goodsName}} <span style="color: red;" v-if="row.acType==8">[赠品]</span></div>
									</template>
								</avue-crud>
							</el-form-item>
							<el-form-item v-if="form1.expressType==1">
								<p v-if="item.ecName">物流公司：{{item.ecName}}</p>
								<p v-if="item.shipCode">物流单号：{{item.shipCode}}</p>
								<el-steps v-if="item.expressInfoBean" direction="vertical" :active="item.expressInfoBean.data.length">
									<el-step v-for="obj of item.expressInfoBean.data" icon="el-icon-success" :key="obj.index" style="padding: 0.2rem;" :description="obj.time+obj.context"></el-step>
								</el-steps>
							</el-form-item>
						</el-form>
					</div>
				</template>
			</avue-form>
		</el-drawer>
	</basic-container>
</template>

<script>
	var VAILD = [{
		label: '通过',
		value: 'true'
	}, {
		label: '拒绝',
		value: 'false'
	}]
	import {
		getIntegralList,
		getDetail,
		getOrderFormGoods,
		approveOrder,
	} from "@/api/order/seller/orderForm";
	import {
		mapGetters
	} from "vuex";
	var baseUrl = '/base/area/getAreaListByLevel';
	var Dict = JSON.parse(localStorage.getItem("mall-dictionary")).content;
	export default {
		data() {
			return {
				Fntimer:null,//节流
				orderStatusEnum:[],//订单枚举
				dialogDeatilVisible: false,
				activeName: '-10',
				addTimeBegin: '',
				addTimeEnd: '',
				form1: {},
				obj: {},
				query: {},
				loading: true,
				page: {
					pageSize: 10,
					currentPage: 1,
					total: 0
				},
				//查看详情
				optionDetail: {
					size: 'mini',
					submitBtn: false,
					emptyBtn: false,
					group: [{
							prop: 'group1',
							column: [{
								label: '订单编号',
								prop: 'orderId',
								type: 'text',
								readonly: true,
							}, {
								label: '下单时间',
								prop: 'oPayTime',
								readonly: true,
							}, {
								label: '支付方式',
								prop: 'payWay',
								type: 'select',
								dicData: Dict.payWayEnum,
								disabled: true,
							}]
						},

						{ //配货单信息
							prop: 'group3',
							column: [{
									prop: 'distributionSn',
									formslot: true,
									span: 24,
								},
							]
						},
						{ //优惠信息
							prop: 'group4',
							column: [{
								prop: 'coupon',
								formslot: true,
							}]
						}, { //收货地址
							prop: 'group5',
							display:true,
							column: [{
								label: '收货人',
								prop: 'trueName',
								readonly: true,
							}, {
								label: '收货地址',
								prop: 'address',
								readonly: true,
							}, {
								label: '详细地址',
								prop: 'areaInfo',
								readonly: true,
							}, {
								label: '电话号码',
								prop: 'mobile',
								readonly: true,
							}, {
								label: '买家留言',
								prop: 'buyerMsg',
								readonly: true,
							}]
						},
						{ //操作历史
							prop: 'group7',
							column: [{
								prop: 'history',
								formslot: true,
								span: 24
							}]
						}
					]
				},
				//宝贝详情
				option1: {
					border: true,
					header: false,
					menu: false,
					size: 'mini',
					align: 'center',
					menuAlign: 'center',
					column: [{
						label: '宝贝图片',
						prop: 'goodsMainPhotoUrl',
						width: 150,
						slot: true,
					}, {
						label: '宝贝简介',
						align: 'left',
						slot: true,
						prop: 'goodsName'
					}, {
						label: '规格',
						width:150,
						prop: 'specInfo',
					}, {
						label: '单价',
						width: 100,
						prop: 'price'
					}, {
						label: '数量',
						width: 100,
						prop: 'count'
					}]
				},
				option: {
					size: 'mini',
					expand: true,
					expandRowKeys: [],
					align: 'center',
					menuAlign: 'center',
					border: true,
					rowKey: 'orderId',
					defaultExpandAll: false,
					height: 'auto',
					// calcHeight: 380,
					menuWidth: 200,
					search: true,
					addBtn: false,
					delBtn: false,
					editBtn: false,
					viewBtn: false,
					column: [{
							label: "订单号",
							prop: "orderId",
							search: true,
							fixed: true,
							rules: [{
								required: true,
								message: "请输入删除标识 0否  1是",
								trigger: "blur"
							}]
						},
						{
							label: "用户",
							prop: "user",
							slot: true,
							rules: [{
								required: true,
								message: "请输入添加时间",
								trigger: "blur"
							}]
						},
						{
							label: "下单时间",
							prop: "addTime",
							rules: [{
								required: true,
								message: "请输入订单号",
								trigger: "blur"
							}]
						}, {
							label: "实付积分",
							prop: "lastTotalAmount",
							slot: true,
							width: 80,
							rules: [{
								required: true,
								message: "请输入订单号",
								trigger: "blur"
							}]
						},
						{
							label: "运费",
							prop: "actualShipmentAmount",
							slot: true,
							width: 80,
							rules: [{
								required: true,
								message: "请输入订单号",
								trigger: "blur"
							}]
						},
						{
							label: "订单状态",
							prop: "orderStatus",
							type: 'select',
							search: true,
							width: 80,
							disabled: true,
							//dicData: Dict.orderStatusEnum
							dicData:[
								{label:'已取消',value:0},
								{label:'待付款',value:10},
								{label:'待审核',value:20},
								{label:'待发货',value:27},
								{label:'待收货',value:30},
								{label:'已收货',value:40},
								{label:'已完成',value:50}
							]
						}
					]
				},
				data: []

			};
		},
		computed: {
			...mapGetters(["permission", 'userInfo']),
			permissionList() {
				return {

				};
			},
		},
		watch: {
			'form1.expressType'() {
				if (this.form1.expressType == 0) { //自供货
					this.optionDetail.group[4].column[1].display = false
				}
			},
		},
		created(){
			//过滤掉积分订单的无用的状态
			let statusEnum=Dict.orderStatusEnum;
			for(let i=0;i<statusEnum.length;i++){
				if(statusEnum[i].label=="待付款" ||statusEnum[i].label=="待审核" ||statusEnum[i].label=="待发货"
					||statusEnum[i].label=="待收货" || statusEnum[i].label=="已完成" || statusEnum[i].label=="已取消"){
					this.orderStatusEnum.push(statusEnum[i])
				}
			}
			this.option.column[4].dicData=this.orderStatusEnum;
		},
		methods: {
			//联系用户
			callUser(userId) {
				this.$EventBus.$emit("chat",{"userId":userId});
			},
			//审核订单
			checkGoods(orderId) {
				if(this.Fntimer){
					clearTimeout(this.Fntimer)
				}
				this.Fntimer = setTimeout(()=>{
					approveOrder(orderId).then((res) => {
						console.log(res)
						if (res.data.code != 200) {
							return;
						}
						this.onLoad(this.page, this.query)
						this.$message({
							type: "success",
							message: "审核成功!"
						});
					});
				},500)
				console.log(this.Fntimer)
				console.log("审核")
			},
			expandChanges(row, expendList) {
				if (expendList.length) {
					this.option.expandRowKeys = []
					if (row) {
						this.option.expandRowKeys.push(row.orderId)
					}
				} else {
					this.option.expandRowKeys = []
				}
				if(row.orderFormGoodsResults.length>0){
					return;
				}
				let obj ={
					ofId:row.id
				}
				this.getOrderFormGoods(obj,row)
			},

			//请求展开行的数据
			getOrderFormGoods(obj,row){
				getOrderFormGoods(obj).then((res) => {
					row.orderFormGoodsResults = res.data.data;
				});
			},

			seeDetails(id) {
				//查看详情
				getDetail(id).then((res) => {
					console.log(res.data.data)
					if (res.data.code != 200) {
						return;
					}
					var data = res.data.data
					this.form1.orderId = data.orderForm.orderId
					this.form1.oPayTime = data.orderForm.addTime
					this.form1.payWay = data.orderForm.payWay
					this.form1.storeName = data.orderForm.storeName
					this.form1.sellerPhoneNumber = data.orderForm.sellerPhoneNumber
					this.form1.sellerAddress = data.orderForm.sellerAddress
					this.form1.orderDistributionList = data.orderDistributionList
					this.form1.goodsDetail = data.orderGoodsList
					this.form1.trueName = data.orderAddress.trueName
					this.form1.zip = data.orderAddress.zip
					this.form1.address = data.orderAddress.provinceAreaName + data.orderAddress.cityAreaName + data.orderAddress.countyAreaName
					this.form1.areaInfo = data.orderAddress.areaInfo
					this.form1.mobile = data.orderAddress.mobile
					this.form1.buyerMsg = data.orderFormInfoResultList[0].buyerMsg
					this.form1.invoiceType = data.orderFormInfoResultList[0].invoiceType //发票类型
					this.form1.invoiceTitle = data.orderFormInfoResultList[0].invoiceTitle //发票抬头
					this.form1.invoiceTaxNum = data.orderFormInfoResultList[0].invoiceTaxNum //纳税人识别号
					this.form1.expressType = data.orderFormInfoResultList[0].expressType //运输类型
					this.form1.expressCompanyName = data.orderFormInfoResultList[0].expressCompanyName //物流公司名
					this.form1.shipCode = data.orderFormInfoResultList[0].shipCode //快递单号
					this.form1.totalPrice = data.orderForm.totalPrice //订单总价
					this.form1.lastAmount = data.orderFormAmount[0].lastAmount //总付款
					this.form1.actualShipmentAmount = data.orderFormAmount[0].actualShipmentAmount //运费
					this.form1.couponAmountPlatform = data.orderFormAmount[0].couponAmountPlatform //平台优惠
					this.form1.fullCutAmount = data.orderFormAmount[0].fullCutAmount //满减优惠
					this.form1.fullDiscountAmount = data.orderFormAmount[0].fullDiscountAmount //满折优惠
					this.form1.couponAmountStore = data.orderFormAmount[0].couponAmountStore //店铺优惠
					this.form1.historyLog = data.logList //操作历史
				});
				this.dialogDeatilVisible = true
			},
			getTime() {
				if (this.addTimeBegin > this.addTimeEnd) {
					this.$message({
						type: "error",
						message: "结束时间不能小于开始时间"
					});
					this.endTime = ''
				}
			},
			onload(val) {
				// console.log(val)
			},
			rowStyle() {
				return {
					backgroundColor: '#f3f3f3',
					color: '#333333'
				}
			},
			closeDialog() {
				this.dialogVisible = false
			},
			closeDetailDialog() {
				this.dialogDeatilVisible = false
			},
			//tabs切换
			handleClick(tab) {
				this.activeName = tab.name
				if (tab.name == '-10') {
					tab.name = '';
                    this.option.column[4].search=true;
				}else{
					this.option.column[4].search=false;
				}
				this.query.orderStatus = tab.name
				this.onLoad(this.page, this.query)
			},
			searchReset() {
				this.addTimeBegin="";
				this.addTimeEnd="";
				this.query = {};
				this.onLoad(this.page, this.query)
			},
			searchChange(params,done) {
				this.page.currentPage = 1
				params.addTimeBegin = this.addTimeBegin
				params.addTimeEnd = this.addTimeEnd
				this.query = params;
				this.onLoad(this.page, params,done);
			},
			currentChange(currentPage) {
				this.page.currentPage = currentPage;
			},
			sizeChange(pageSize) {
				this.page.pageSize = pageSize;
			},
			refreshChange() {
				this.onLoad(this.page);
			},
			onLoad(page, params = {},done) {
			    //重首页跳转过来的时候需要定位到对应的tab页
			    if(this.$route.query.orderState){
			        let state=this.$route.query.orderState;
                    this.activeName=state;
                    this.$route.query.orderState="";
			        this.handleClick({name:state})
                }
				this.loading = true;
				getIntegralList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
					if(done){
						done();
					}
					if(res.data.code == 200){
						this.loading = false;
						const data = res.data;
						this.page.total = data.count;
						this.data = data.data;
					}else{
						this.$message({
							type:'error',
							message:res.data.data
						})
					}

				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.el-col {
		float: none;
		display: inline-block;
		width: auto;
	}
	.el-table__expanded-cell {
		padding: 0 !important;
	}

	el-button {
		margin: 0.1rem;
	}

	.reason {
		color: #a8a8a8;
	}

	.distribution el-form-item__content {
		margin-left: 0;
	}
</style>
